<template>
	<view >
		<view :class="{dpn:isShowSearch}">
			<!-- 导航栏 -->
			<uni-nav-bar fixed="true">
				<block slot="left">
					<image src="../../static/image/search/6.png" class="top-img" mode="widthFix"></image>
				</block>
				<view class="top-search flex-box" @click="openSearch">
					<image src="../../static/image/search/2.png" mode="widthFix" class="search-icon"></image>
					周杰伦
				</view>
				<block slot="right">
					<image src="../../static/image/mine/r.png" class="top-img" mode="widthFix"></image>
				</block>
			</uni-nav-bar>
			<view class="page-content">
				<!--
					导航栏-三方插件使用步骤
						1.uniapp官网找到插件市场
						2.输入插件名称mescroll-uni查找
						3.点击左边：使用HBuilderX导入插件
						4.然后导入uni_modules文件使用
				 -->
				<mescroll-uni
					:down="downOption"
					:up="upOption" 
					@down="downCallback" 
					@up="upCallback"
				>
					<!-- 添加轮播 -->
						<view class="banner">
							<swiper :indicator-dots="true" 
									:autoplay="true" 
									:interval="3000" 
									:duration="500"
									indicator-color="rgba(255,255,255,.5)"
									indicator-active-color="#ff372b"
							>
								<swiper-item v-for="(item,index) in swiper" :key="index">
									<view class="item">
										<image :src="item.imageUrl" class="img"></image> 
										<view class="tag">
											{{item.typeTitle}}
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<!-- 主入口 -->
						<view class="main-bar flex-box">
							<view class="flex-item" v-for="(item,index) in contentBar" :key="index">
								<view>
									<!-- 注：用反引号拼接要用""包着 ------------------------------------- -->
									<image :src="`../../static/image/index/t_${index+1}.png`" class="img"></image>
									{{item.name}}
								</view>
							</view>
						</view>
						<!-- 推荐歌单 -->
						<song-list :list="recommendSongs" title='推荐歌单' link=""></song-list>
						<!-- 新碟新歌 -->
						<view class="song-list">
							<view class="switch-line flex-box">
									<view class="flex-box">	
										<view class="switch-item" :class="{on:newType==1}" @click="switchTab(1)">
											新碟
										</view>
										<view class="switch-item" :class="{on:newType==2}" @click="switchTab(2)">
											新歌
										</view>
									</view>
									<template v-if="newType==1">
										<view class="more">
											更多新碟
										</view>
									</template>
									<template v-else>
										<view class="more">
											更多新歌
										</view>
									</template>
							</view>
								<scroll-view scroll-x="true" class="scroll-view">
									<view class="item" v-for="(item,index) in latestAlbum">
										<image :src="item.picUrl" class="img"></image>
										<view class="desc ellipsis">
											{{item.name}}
										</view>
										<view class="desc ellipsis">
											{{item.artist.name}}
										</view>
									</view>
								</scroll-view>
						</view>
						<!-- 精选视频 -->
						<view class="video-list song-list">
							<view class="tit-bar">
								精选视频
								<view class="more fr">
									更多
								</view>
							</view>
							<view class="video-item" v-for="(item,index) in relatedVideo" :key="index">
								<image :src="item.coverUrl" class="img"></image>
								<view class="desc ellipsis">
									{{item.title}}
								</view>
							</view>
						</view>
					</mescroll-uni>
				</view>
			</view>
			<search ref="search" @closeSearch="closeSearch"></search>
	</view>
</template>

<script>
	import {
			apiGetBanner , 
			apiGetPersonalized,
			apiGetTopAlbum,
			apiGetVideo
			} from "@/apis/index.js"
	import songList from "../../components/songList.vue"
	import search from "@/components/search.vue"
	import MescrollUni from "../../uni_modules/mescroll-uni/components/mescroll-uni/mescroll-uni.vue"
	import uniNavBar from "../../uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue"
	export default {
		data() {
			return {
				swiper:[],          	//轮播
				contentBar:[    		//主入口
					{name: "每日推荐"},
					{name: "歌单"},
					{name: "排行榜"},
					{name: "电台"},
					{name: "直播"}
				],
				recommendSongs:[] ,		//推荐歌单
				newType:1,  			//新碟新歌类别  1--第一个  2--第二个
				latestAlbum:[],  		//存储新碟新歌
				latestTempAlbum:[], 	//临时变量
				relatedVideo:[],  		//精选视频
				isShowSearch:false,		//是否显示搜索页
				downOption:{		//下拉刷新
					auto:false  	//false即不默认执行
				},
				upOption:{   		//上拉加载下一页
					auto:false,
					page:{
						num:0,     	//起始页
						size:10,	//一页的条数
					}
				},
			}
		},
		components: {
			songList,
			search,
			MescrollUni,
			uniNavBar
		},
		onLoad() {
			this.$nextTick(() => {	
				this.getBanner() 
				this.getAlbum()
				this.getPersonalized()
			})
			
		},
		onPullDownRefresh() {   //下拉刷新，要在pages.json中配置上"enablePullDownRefresh": true
			console.log("刷新页面");
			setTimeout(function () { //1s后关闭刷新
				uni.stopPullDownRefresh();
			}, 1000);
		},
		methods: {
			getList(pageNum, pageSize,successCallback,errCallback){	  // 精选视频接口
				let self = this
				 //根据资源id查询
				let params = {
					id:32154,
					pageSize,
					pageNum
				}
				apiGetVideo(params).then(res => {
					successCallback&&successCallback(res.data.data)
				},err=>{
					errCallback&&errCallback()
				})
			},
			downCallback(mescroll){  //下拉刷新执行，组件自带
				// 重置列表为第一页，自动执行page.num = 1,再触发upcallback
				mescroll.resetUpScroll()
			},
			upCallback(mescroll){	//滚到底部上拉刷新执行，组件自带
				// 加载下一页数据
				this.getList(mescroll.num,mescroll.size,res=>{ //行187传res.data.data来,这里res就是res.data.data
					// 若是第一页则清空
					if(mescroll.num == 1){
						this.relatedVideo = []
					}
					// 累加数据
					this.relatedVideo = this.relatedVideo.concat(res)
					// 成功的回调，隐藏下拉刷新状态
					mescroll.endSuccess()
				},()=>{
					// 失败的回调，隐藏下拉刷新状态
					mescroll.endErr()
				})
			},
			getBanner(){ 			 //轮播接口 
				let self = this
				apiGetBanner().then(res => {
					self.swiper = res.data.banners
				})
			},
			getPersonalized(){   	//推荐歌单接口
				let self = this
				apiGetPersonalized().then(res => {
					self.recommendSongs = res.data.result
				})
			},
			getAlbum(){   			//新碟新歌接口
				let self = this
				apiGetTopAlbum().then(res => {
					self.latestTempAlbum = res.data.albums
					// 取前面三个
					self.latestAlbum = self.latestTempAlbum.slice(0,5)
				})
			},
			switchTab(val){   		//切换新碟新歌
				let self = this
				self.newType = val
				// 设定开始和结束的位置
				let temp = {
					s: val == 1 ? 0 : 5,
					e: val == 1 ? 5 : 10,
				}
				self.latestAlbum = self.latestTempAlbum.slice(temp.s,temp.e)
			},
			// 打开搜索页
			openSearch(){
				this.isShowSearch = true
				// 打开搜索页
				this.$refs.search.open()
			},
			// 关闭搜索页
			closeSearch(){
				this.isShowSearch = false
			}
		}
	}
</script>

<style lang="scss">
page {
	color: #1a1a1a;
	font-size: 24rpx;
}
.dpn{
	display: none;
}
.top-img {
	width: 50rpx;
	height: 50rpx;
	margin-top: 10rpx;
}
.top-search {
	width: 490rpx;
	margin-top: 8rpx;
	/* #ifdef MP-WEIXIN */
	width: 460rpx;
	margin-left:-60rpx;
	/* #endif */
	height: 72rpx;
	// margin-right: 24rpx;
	border-radius: 72rpx;
	color: #c6c6c6;
	background: #f7f7f7;
	align-items: center;
	justify-content: center;
	.search-icon {
		width: 28rpx;
		height: 29rpx;
		margin-right: 12rpx;
	}
}
.page-content {
	position: fixed;
	top: 64px;
	left: 0;
	right: 0;
	bottom: 0px;
	/* #ifdef H5 || MP-WEIXIN */
	top: 44px;
	/* #endif */
}
.banner {
	width: 100%;
	height: 318rpx;
	margin: 30rpx auto 44rpx;
	.swiper {
		height: 338rpx;
	}
	.item {
		position: relative;
		display: block;
		width: 686rpx;
		height: 338rpx;
		margin: 0 auto;
		margin-top: 60rpx;
		border-radius: 14rpx;
		overflow: hidden;
	}
	.img {
		display: block;
		width: 100%;
		height: 100%;
	}
	.tag {
		position: absolute;
		bottom: 0;
		right: 0;
		height: 34rpx;
		padding: 0 14rpx;
		line-height: 34rpx;
		color: #fff;
		background: #43a5f0;
		z-index: 10;
		border-top-left-radius: 14rpx;
	}
}

.main-bar {
	padding-bottom: 22rpx;
	text-align: center;
	line-height: 70rpx;
	color: #666;
	border-bottom: 1rpx solid #e6e6e6;
	.img {
		display: block;
		width: 92rpx;
		height: 92rpx;
		margin: 0 auto;
	}
	.flex-item {
		position: relative;
		.date {
			position: absolute;
			left: 50%;
			top: 40rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #ff392d;
			transform: translateX(-50%) scale(0.8);
		}
	}
}

.song-list {
	padding-left: 32rpx;
	.tit-bar {
		font-size: 34rpx;
		font-weight: 600;
		line-height: 110rpx;
	}
	.more {
		width: 150rpx;
		height: 50rpx;
		line-height: 50rpx;
		text-align: center;
		margin-top: 30rpx;
		margin-right: 32rpx;
		color: #333;
		font-weight: 400;
		font-size: 24rpx;
		border: 2rpx solid #e6e6e6;
		border-radius: 50rpx;
	}
	.switch-line {
		justify-content: space-between;
		color: #999;
		.flex-box {
			line-height: 110rpx;
			width: 300rpx;
		}
		.switch-item {
			font-weight: 600;
			&:first-child {
				width: 80rpx;
			}
			&:last-child {
				padding-left: 22rpx;
			}
			&.on {
				color: #333;
				font-size: 34rpx;
			}
		}
	}
	.scroll-view {
		width: 100%;
		white-space: nowrap;
	}
	.item {
		position: relative;
		display: inline-block;
		width: 218rpx;
		padding-bottom: 16rpx;
		margin-right: 16rpx;
		line-height: 34rpx;
		&:before {
			content: ' ';
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 40rpx;
			z-index: 2;
			background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.2), transparent);
		}
		&.video {
			width: 450rpx;
		}
		.img {
			display: block;
			width: 100%;
			height: 218rpx;
			margin-bottom: 16rpx;
			background: #eee;
			border-radius: 10rpx;
		}
	}
	.count {
		position: absolute;
		top: 0;
		right: 0;
		padding-left: 25rpx;
		line-height: 34rpx;
		color: #fff;
		font-size: 24rpx;
		z-index: 10;
		background: url()
			no-repeat;
		background-size: 25rpx 25rpx;
		transform: scale(0.8);
	}
}
.video-list {
	padding-left: 0;
	.tit-bar {
		padding-left: 32rpx;
	}
	.video-item {
		width: 686rpx;
		height: 490rpx;
		margin: 0 auto;
		background: #f8f8f8;
		border-radius: 10rpx;
		overflow: hidden;
		margin-bottom: 24rpx;
	}
	.img {
		display: block;
		width: 686rpx;
		height: 390rpx;
		background: #eee;
	}
	.desc {
		padding-left: 40rpx;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 100rpx;
	}
}

/*
	 *平台差异化处理的代码可以放在底部，这样有利于集中管理
	*/
/* #ifdef MP-WEIXIN */
.banner {
	margin-top: 60rpx;
}
/* #endif */
</style>
